// @ts-nocheck
/* eslint-disable */

angular
  .module("myApp", [])
  .component("learnNg", {
    template: /* HTML */ html`
      <my-tabs>
        <my-pane title="Hello">
          <h4>Hello</h4>
          <p>Lorem ipsum dolor sit amet</p>
        </my-pane>
        <my-pane title="World">
          <h4>World</h4>
          <em>Maris element element enid at subscript.</em>
          <p><a href="" ng-click="i = i + 1">counter: {{i || 0}}</a></p>
        </my-pane>
      </my-tabs>
    `,
  })
  .component("myTabs", {
    transclude: true,
    controller: function MyTabsController() {
      var panes = (this.panes = []);
      this.select = function (pane) {
        angular.forEach(panes, function (pane) {
          pane.selected = false;
        });
        pane.selected = true;
      };
      this.addPane = function (pane) {
        if (panes.length === 0) {
          this.select(pane);
        }
        panes.push(pane);
      };
    },
    template: /* HTML */ html`<div class="tabs" ng-transclude></div>`,
  })
  .component("myPane", {
    transclude: true,
    require: {
      tabsCtrl: "^myTabs",
    },
    bindings: {
      title: "@",
    },
    controller: function () {
      this.$onInit = function () {
        this.tabsCtrl.addPane(this);
        console.log(this);
      };
    },
    template: /* HTML */ html`
    <div
      class="tab-pane"
      ng-show="!$ctrl.selected"
      ng-transclude
    ></div>`,
  });
